<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<link rel="stylesheet"
	href="${ctx}/js/summernote/summernote.css">
<link rel="stylesheet"
	  href="${ctx}/js/webuploader-0.1.5/webuploader.css">
	
<!-- summernote 编辑器插件 -->

<script
	src="${ctx}/js/summernote/summernote.js"></script>
<script
	src="${ctx}/js/summernote/lang/summernote-zh-CN.js"></script>

<script type="text/javascript"
	src="${ctx}/js/system/producttree/showUI.js"></script>

<!-- 图片上传  -->
<script type="text/javascript" 
	src="${ctx}/js/webuploader-0.1.5/webuploader.js"></script>

<div class="layer_material">
	<form id="form" name="form" class="form-horizontal" method="post"
		action="http://localhost:8080/hewke-con/producttree/addForm.shtml">
		<input type="hidden" name="token" value="${token}" />

		<ul>
			<li class="clearfix"><label class="text">产品名称：</label> <input
				class="form-control" name="name" placeholder="请输入产品名称" type="text"></li>
			<li class="clearfix"><label class="text">产品编号：</label> <input
				class="form-control" name="code" placeholder="请输入产品编号" type="text"></li>
			<li class="clearfix"><label class="text">产品类型：</label> <input
				class="form-control" name="type" placeholder="请输入产品类型" type="text"
				value="默认选择" readonly="readonly"></li>
			<li class="clearfix"><label class="text">产品分组：</label> <input
				class="form-control" name="func_group" placeholder="请输入产品分组"
				type="text" value="默认选择" readonly="readonly"></li>


			<li class="clearfix"><label class="text">产品规格：</label>
				<div class="area_center" name="standard">
					<table
						class="table table-striped table-bordered table-advance table-hover">
						<thead>
							<tr>
								<th>规格</th>
								<th class="hidden-xs">规格值</th>
								<th>价格（元）</th>
								<th>库存</th>
								
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="highlight"><input type="text" maxlength='10'
									name="specifications"></td>
								<td class="hidden-xs"><input type="text" maxlength='10'
									name="spec_values"></td>
								<td><input type="text" maxlength='10' name="prices"></td>
								<td><input type="text" maxlength='10' name="stocks"></td>
							</tr>
						</tbody>
					</table>
					<a class="fa fa-plus-square" href="javascript:;" title="添加条目"></a>
				</div></li>
			<li class="clearfix"><label class="text" style="width: 100%;">产品图片：最多上传7个图片,图片大小不能超过1M.只上传选中图片，多个上传时选中多个。</label>
				<div class="area_center" name="baner" id="uploader">
			      <!--用来存放item-->
			        <div id="filePicker">选择图片</div>
     			    <div id="fileList" class="uploader-list clearfix"></div>
				</div>
			</li>
			<li class="clearfix"><label class="text">产品描述：</label>
				<div class="area_center" name="description">
					<div id="editor"></div>
				</div></li>
		</ul>
	</form>
</div>
<script>
	$('#editor').summernote({
		height : 300,
		lang : "zh-CN",
		minHeight : 300,
		dialogsFade : true,// Add fade effect on dialogs
		dialogsInBody : true,// Dialogs can be placed in body, not in
		disableDragAndDrop : false
	});

	$(".fa-plus-square").click(function() {
		var trs = $(this).siblings("table").find("tbody tr");
		if(trs.length > 5) return ;
		var tr = '<tr><td class="highlight"><input type="text" maxlength="10" name="specifications"></td><td class="hidden-xs"> <input type="text" maxlength="10" name="spec_values"> </td><td> <input type="text" maxlength="10" name="prices"></td><td><input type="text" maxlength="10" name="stocks"></td></tr>';
		$(this).siblings("table").find("tbody").append(tr)
	})
	
	// 图片展示区域
    var $list = $("#fileList");
	
	// 图片宽高
    var ratio = window.devicePixelRatio || 1,
        thumbnailWidth = 200 * ratio,
        thumbnailHeight = 100 * ratio;
	// 初始化Web Uploader
    var uploader = WebUploader.create({
        auto: false, // 选完文件后，是否自动上传。
        swf: '${ctx}/js/Uploader.swf',// swf文件路径
       // server: 'http://webuploader.duapp.com/server/fileupload.php', // 文件接收服务端。
        pick: '#filePicker',// 选择文件的按钮。可选。 内部根据当前运行是创建，可能是input元素，也可能是flash.
        fileSingleSizeLimit : 1024 * 1024 * 2, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileNumLimit: 7,//验证文件总数量, 超出则不允许加入队列。
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,png',
            mimeTypes: 'image/*'
        }
    });
	// 图片添加进来时，进行展示
    uploader.on( 'fileQueued', function( file ) {
    	// 图片展示区域布局
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '<a href="javascript:;" class="fa fa-times-circle"></a>'+
                '</div>'
            ),
        $img = $li.find('img');
        // $list为容器jQuery实例
        $list.append( $li );
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
        $li.on('click', '.fa-times-circle', function() {
        	$(this).parent().remove();
            uploader.removeFile(file,true);
        })
    });
	
	function closeWin() {
		layer.closeAll();
	}
</script>